<template>
    <div class="manage-index">
        <el-row :gutter="20">
            <el-col :span="6" :offset="0">
                <el-form-item label="分类名称">
                    <el-input v-model="classificationName" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col :span="18" :offset="0">
                <el-form :inline="true">
                    <el-form-item label="物料编码">
                        <el-input v-model="materialCode" placeholder="请输入物料编码"></el-input>
                    </el-form-item>
                    <el-form-item label="物料名称">
                        <el-input v-model="materialName" placeholder="请输入物料名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                </el-form>

                <el-button size="mini" style="background-color:#ADD8E6 "
                    v-perm:productionsystem:masterdata:manage:insert="Insert">新增</el-button>
                <el-button size="mini " style=" background-color: #90EE90"
                    v-perm:productionsystem:masterdata:manage:update="Update">修改</el-button>
                <el-button size="mini" style="background-color: #FFCCCB">删除</el-button>
                <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="materialCode" label="物料编码" width="120"></el-table-column>
                    <el-table-column prop="materialName" label="物料名称" width="120"></el-table-column>
                    <el-table-column prop="model" label="规格型号" width="120"></el-table-column>
                    <el-table-column prop="unit" label="单位" width="120"></el-table-column>
                    <el-table-column prop="materialId" label="物料/产品" width="120"></el-table-column>
                    <el-table-column prop="category" label="所属分类" width="120"></el-table-column>
                    <el-table-column prop="status" label="是否启用" width="120"></el-table-column>
                    <el-table-column prop="safetyStock" label="设置安全库存" width="120"></el-table-column>
                    <el-table-column prop="creationTime" label="创建时间" width="120"></el-table-column>
                    <el-table-column label="操作" width="300px">
                        <template #default="scope">
                            <el-button :row="scope.row" type="text">修改</el-button>
                            <el-button type="text" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="deta" @close="close"></router-view>
        </el-dialog>
    </div>


</template>

<script setup>


import { ref } from 'vue';
import router from '@/router';
let visible = ref(false)
let title = ref("");
let deta = ref({});


//初始化状态（设置默认值）
const classificationName = ref('');
const materialCode = ref('');
const materialName = ref('');

const salesorder = ref([
    {
        materialCode: '123456',
        materialName: '高级物料',
        model: '规格型号',
        unit: '单位',
        materialId: '物料/产品',
        category: '所属分类',
        status: '是否启用',
        safetyStock: '设置安全库存',
        creationTime: '创建时间'
    }])

const data = [
    {
        label: '物料产品管理',
        children: [
            {
                label: '物料',
                children: [
                    { label: '高级物料' },
                    { label: '低级物料' },
                ]
            },
            {
                label: '产品',
                children: [
                    { label: '半产品' },
                    { label: '成品' },
                ]
            }
        ]
    }
]

const defaultProps = {
    children: 'children',
    label: 'label'
}

const handleNodeClick = (data) => {
    console.log(data)
}


let Insert = (salesorder) => {
    console.log(salesorder)
    visible.value = true;
    router.push(salesorder.path)
}

let Update = (salesorder) => {
    console.log(salesorder)
    visible.value = true;
    router.push(tableData.path)
}
let close = () => {
    visible.value = false;
    loadData();
}
</script>

<style lang='scss' scoped></style>